<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Stock Watcher</title>

<link rel="stylesheet" type="text/css" media="screen"
	href="${pageContext.request.contextPath}/css/smoothness/jquery-ui-1.8.12.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="${pageContext.request.contextPath}/css/smoothness/ui.jqgrid.css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.5.2.min.js"
	type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.jqGrid.min.js"
	type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/grid.addons.js"
	type="text/javascript"></script>
<script type="text/javascript">

			pageContext = "${pageContext.request.contextPath}/servlet/proxy?";
			realURL = "http://localhost:9090/proxy_broker/rest/index";
			
			function brokerURL() {
				return pageContext + realURL;
			}
		
			function createStockTable(tableHeader) {
				jQuery("#stockTable").jqGrid({
					datatype: "local",
					height: 400, 
					colNames:['Index Name', 'Current Value','Maximum Value', 'Minimum Value', 'Opening Value','Reference Value','Sales Volume', 'Update Time'], 
					colModel:[ 
					          {name:'name',index:'name', width:120},
					          {name:'currentValue',index:'currentValue', width:120, sorttype:"float"},
					          {name:'maxValue',index:'maxValue', width:120, sorttype:"float"},
					          {name:'minValue',index:'minValue', width:120, sorttype:"float"},
					          {name:'openingValue',index:'openingValue', width:120, sorttype:"float"},
					          {name:'referenceValue',index:'referenceValue', width:120, sorttype:"float"},
					          {name:'salesVolume',index:'salesVolume', width:120, sorttype:"float"},
					          {name:'time',index:'time', width:150, sortable:false}				
					          ],
		          sortname: 'name', 
		          viewrecords: true,
		          sortorder: "desc",
				  caption:tableHeader
				});
			}
				
			function destroyTable() {
				$('#stockTable').jqGrid('GridUnload');
			}

			function initTable(header, brokerAddress) {
				realURL = brokerAddress;
				$.getJSON(brokerURL(), function(data) {
					if(data) {
							destroyTable();
							createStockTable(header);
							for(var i=0;i<=data.valors.length;i++) { 
								jQuery("#stockTable").jqGrid('addRowData',i+1,data.valors[i]);
							}
					}
				});
			}
			
			function updateTableContent() {
				$.getJSON(brokerURL(), function(data) {
					if(data) {
							for(var i=0;i<=data.valors.length;i++) { 
								if(data.valors[i] && data.valors[i].currentValue != 0) {
									jQuery("#stockTable").jqGrid('setRowData',i+1,data.valors[i]);
								}
							}								
					}
				});
			}
			
		</script>
</head>

<body>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<h2> Select index:&nbsp;		
	<select name="index">
		<option value="http://localhost:9090/proxy_broker/rest/index">WIG-SPOZYW</option>
		<option value="http://localhost:9091/proxy_broker/rest/index">WIG-PL</option>
	</select>
</h2>

<script>
	$("select").change(function () {
		var indexName = $("select option:selected").text();
    	var brokerAddress = $("select option:selected").val();
    	initTable(indexName, brokerAddress);
	})
</script>


<table id="stockTable"></table>

<script type="text/javascript">
				jQuery(document).ready(function() {
					$.getJSON(brokerURL(), function(data) {
						if(data) {
								destroyTable();
								createStockTable('WIG-SPOZYW', realURL);
								for(var i=0;i<=data.valors.length;i++) { 
									jQuery("#stockTable").jqGrid('addRowData',i+1,data.valors[i]);
								}
						}
					});
					initTable('WIG-SPOZYW', realURL);
					setInterval(updateTableContent, 10000);					
				});
</script>
</body>
</html>
